<template>
  <div style="margin: 5px;">
    <div>
      <div>
        <el-row v-if="!lixian">
          <h3 style="display:inline-block">{{Data.CodeNum}}.</h3>
          <div v-for="opt in Data.Options" style="display:inline-block">
            <input
              type="text"
              class="blanktext"
              v-bind:style="{width:opt.InputLength +'px'}"
              v-model="opt.blankText"
              v-if="opt.itemName=='___'"
            >
            <h3 v-if="opt.itemName!='___'" v-html="opt.itemName"></h3>
          </div>
        </el-row>

        <!-- 离线表格模式-->
        <div v-if="lixian">
          {{Data.Title.replace(/<[^>]+>/g,"")}}
        </div>
      </div>
    </div>

    <div v-if="canEdit==true" style="margin: 5px;">
      <el-card class="box-card" style="margin-top:20px">
        <el-alert title="说明:在编辑器中输入'___'表示填空的输入框." type="success"></el-alert>
        <EditorComponent v-model="Data.Title" v-bind:Html="Data.Title" @input="GetHtml"/>
        <div class="radius" style="border-radius:2px; height:50px">
          <table class="setting-table">
            <tr>
              <td>
                <el-checkbox v-model="Data.MustAnswer">必答题</el-checkbox>
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
        </div>
        <table class="el-table_body" style="width: 100%;">
          <tr>
            <th>填空的标题</th>
            <th>输入框宽度(px)</th>
            <th>数据类型</th>
            <th>最小值</th>
            <th>最大值</th>
          </tr>
          <tr v-for="opt in Data.Options" v-if="opt.canFillBlank">
            <td>
              <el-input size="small" v-model="opt.memo" placeholder="请输入内容"></el-input>
            </td>
            <td>
              <div>
                <el-input
                  size="small"
                  style="width: 80px;"
                  @change="updateInputLenght()"
                  v-model="opt.InputLength"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </td>
            <td>
              <div>
                <DataTypeComponent v-model="opt.DataType"></DataTypeComponent>
              </div>
            </td>
            <td>
              <div>
                <el-input-number size="mini" :disabled="opt.DataType!=1" v-model="opt.MinValue"></el-input-number>
              </div>
            </td>
            <td>
              <div>
                <el-input-number :disabled="opt.DataType!=1" size="mini" v-model="opt.MaxValue"></el-input-number>
              </div>
            </td>
          </tr>
        </table>

        <el-button type="text" @click="lixian=!lixian">离线模式</el-button>
        <el-button type="warning " style="margin-top:5px;width:100%" @click="canEdit=false">完成编辑</el-button>
      </el-card>
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import FillBlankOption from "./ts/FillBlankOption";
import FillBlankSubject from "./ts/FillBlankSubject";

import TBaseQuestion from "./ts/TBaseQuestion";
import DataTypeComponent from "./DataTypeComponent.vue";
import EditorComponent from "./EditorComponent.vue";
import { QuestionDataTypes, QuestionTypes } from "./ts/QuestionDataTypes";

class OutPutObj {
  public Index: number = 0;
  public Html: string = "";
  constructor(index: number, html: string) {
    this.Index = index;
    this.Html = html;
  }
}

@Component({
  components: { EditorComponent, DataTypeComponent }
})
// 填空题控件
export default class FillBlankComponent extends TBaseQuestion<
  FillBlankOption,
  FillBlankSubject
> {
  public $name: string = "FillBlankComponent";
  public blank_str = "___";
  public inputclass = " ";

  public Html: string = "";
  // 标题输出数组
  public OutPuts: OutPutObj[] = [];


  constructor() {
    super(FillBlankOption, FillBlankSubject);
    this.Data.QuestionType = QuestionTypes.qtFillBlank;
    this.Data.Title = "姓名：___ 年龄：___ 岁,电话号码 ___";
  }

  mounted() {
    super.mounted();
    this.initProps();

    console.info("component mounted!");
  }

  public SetItemText(index: Number, obj: any) {
    console.info("setItemText:" + index + " obj:" + obj);
  }

  public initOptions() {}

  // 插入选项
  public insert(id: string): void {}
  public getQuestionData(): any {
    // return this.Data;
  }

  public setQuestionData(data: string) {}

  public getTitle(): void {
    // console.info(Data.Title);
    // this.Data.Title;
  }

  public setTitle(txt: string): void {}

  public GetHtml(html: string): void {
    this.Html = html;
    this.CreateOptions(html);
    this.Data.Title = html;
  }
  // 取得填空的个数
  public CreateOptions(html: string) {
    // clear array of Options

    while (this.Data.Options.length > 0) {
      this.Data.Options.pop();
    }

    let tempArray: string[] = html.split(this.blank_str);

    for (let i: number = 0; i < tempArray.length; i++) {
      let a = tempArray[i];
      if (i > 0) {
        let opt: FillBlankOption = new FillBlankOption();
        opt.itemName = this.blank_str;
        opt.canFillBlank = true;

        this.Data.Options.push(opt);

        let opt2: FillBlankOption = new FillBlankOption();
        opt2.itemName = a;
        opt2.canFillBlank = false;

        this.Data.Options.push(opt2);
      } else {
        let opt3: FillBlankOption = new FillBlankOption();
        opt3.itemName = a;
        opt3.canFillBlank = false;

        this.Data.Options.push(opt3);
      }
    }
  }

  public GetInputClass(width: number): string {
    return "width:" + width + "px";
  }
  public updateInputLenght(): void {
    // this.CreateOptions(this.Html);
  }
}
</script>
 
<style>
.optionLayout {
  display: flex;
  display: -webkit-flex;
  border: 1px solid gainsboro;

  width: 100%;
  align-items: center;
  justify-content: left;
}
.setting-table td {
  text-align: center;
  vertical-align: middle;
}
table {
  width: 100%;
  font-size: 14px;
  margin-top: 5px;
}

.blanktext {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom-width: thin;
  text-align: center;
}
.normltext {
  font-size: 20px;
  font-weight: 200;
}
.tui table tr td {
  border: 1px solid #ccc;
}
.tui table tr th {
  border: 1px solid #ccc;
}
</style>
